<template>
	<view class="content with-tabbar">

		<scroll-view class="pt-18 pb-18 pl-30 pr-30 bg-fff" style="white-space: normal;height: calc(100vh - 150upx);"
			scroll-y>
			<div class=" ">

				<picker mode="selector" @change="change($event, 'positions')" :range="positionList" :value="expectType"
					range-key="label2">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
						<view class="form-label resume-title fontS28 color-3"> 职位类型 </view>
						<view class=" form-cnt">
							<div class="radio">{{ expectType > -1 && expectType !== null ?
								positionList[expectType].label2 :
								'' }}
							</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>

				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="showProfession">
					<view class="form-label resume-title fontS28 color-3"> 期望职位 </view>
					<view class="form-cnt">
						<div class="radio">{{ professionName }}</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15" @click="showMoney">
					<div class="resume-title fontS28 color-3">期望薪资</div>
					<div class="fontS28 color-0d0 resume-input">
						{{ minSalary ? minSalary + '元-' + maxSalary + '元' : '' }}
					</div>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</div>
				<picker mode="region" @change="change($event, 'region')">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b  pt-15">

						<view class="form-label resume-title fontS28 color-3"> 期望地区 </view>
						<view class="form-cnt">
							<div class="radio">{{ regionValue }}</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15" @click="goIndustry">
					<view class="form-label resume-title fontS28 color-3"> 期望行业 </view>
					<view class="form-cnt">
						<div class="radio">{{ postForm.industryNames ? postForm.industryNames : '' }}
						</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
			</div>
		</scroll-view>
		<!-- 职业列表 -->
		<div class="profession-cover" v-if="professionStatus" @click="professionStatus = false"></div>
		<div class="profession-box" v-if="professionStatus">
			<div class="flex align-center pl-30 pr-30 lh-80 bor-b">
				<div @click="professionStatus = false">取消</div>
				<div class="color-green ml-auto" @click="professionStatus = false">确定</div>
			</div>
			<div class="flex">
				<div class="profession-left">
					<scroll-view style="height:600upx" scroll-y>
						<div v-for="(item, index) in ProfessionList" :key="index"
							:class="professionIndex === index ? 'active' : ''" @click="changeTab(item, index)">
							{{ item.text }}
						</div>
					</scroll-view>
				</div>
				<div class="profession-right">
					<scroll-view style="height:600upx" scroll-y>
						<div v-for="(item, index) in ProfessionList[professionIndex].professionDtos" :key="index"
							@click="changeSub(item)">
							{{ item.text }}
						</div>
					</scroll-view>
				</div>
			</div>

		</div>
		<!-- 期望薪资 -->
		<div class="profession-cover" v-if="salaryStatus" @click="salaryStatus = false"></div>
		<div v-if="salaryStatus" class="profession-box">
			<div class="flex align-center pl-30 pr-30 lh-80 bor-b">
				<div @click="professionStatus = false">取消</div>
				<div class="color-green ml-auto" @click="onConfirmSalay">确定</div>
			</div>
			<picker-view style="height:550upx;width:100%" @change="onColumnChange">
				<picker-view-column>
					<view style="height: 60upx;color:#000;line-height:60upx;text-align:center"
						v-for="(item, index) in minSalaryList" :key="index">{{ item }}</view>
				</picker-view-column>
				<picker-view-column>
					<view style="height: 60upx;color:#000;line-height:60upx;text-align:center"
						v-for="(item, index) in maxSalaryList" :key="index">{{ item }}</view>
				</picker-view-column>

			</picker-view>

		</div>

		<div class="bottom">
			<div v-if="flag === 'edit'" class="submitBtn fontS26 mr-20" @click="delectBtn">删除
			</div>
			<div class="submitBtn fontS26" @click="toNext">保存
			</div>

		</div>



	</view>
</template>

<script>
import { saveResumeExpect, editResumeExpect, deleteResumeExpect, onLineResume, findProfessionTree, resumeExpectDetail } from '@/api/resume'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},

	},

	data() {
		return {
			postForm: {
				expectType: null,//职业类型
				industryId: '',//行业
				industryIds: '',//行业Ids
				industryNames: null,//行业名称
				industryTypeId: null,//行业类型
				maxSalary: null,
				minSalary: null,
				professionId: null,//职位id
				professionTypeId: null,//职位类型id
				cityCode: '',
				provinceCode: '',
				// resumeId: '',//简历id
				userId: ''
			},
			positionList: getApp().globalData.positionType,
			professionName: '',
			// 薪资
			salaryStatus: false,
			minSalaryList: [],
			maxSalaryList: [],
			salay: null,
			salayFix: null,
			salayValue: true,
			minSalary: null,  // 默认最低薪资
			maxSalary: null, // 默认最高薪资

			// 期望薪资
			regionValue: '',
			sexList: getApp().globalData.sexList,
			eduList: getApp().globalData.education,
			experienceList: getApp().globalData.experience,
			expectType: null,
			regionList: [],
			postStatus: false,
			ProfessionList: [],
			professionIndex: 0,
			professionStatus: false,
			flag: 'add'
		}
	},
	async onLoad(option) {
		await this.getProfessionTree()
		this.flag = option.flag;
		this.postForm.userId = this.userInfo.userId

		if (option.id) {
			await this.getResumeDetail(option.id)
			this.flag = 'edit'
		} else {
			this.flag = 'add'
		}
	},
	onShow() {
		console.log(this.postForm.industryNames)
		this.$forceUpdate()
	},
	methods: {

		showProfession() {
			this.professionStatus = true
		},
		showMoney() {
			this.minSalaryList = []
			this.maxSalaryList = []
			for (let i = 2000; i < 50000; i += 1000) {
				this.minSalaryList.push(i)
				this.maxSalaryList.push(i)
			}
			this.salaryStatus = true;
		},
		async getProfessionTree() {
			const { data } = await findProfessionTree()
			this.ProfessionList = data
		},
		async getResumeDetail(id) {
			const { data } = await resumeExpectDetail(id)
			this.postForm = {
				...data,

			}

			this.expectType = this.positionList.findIndex(item => { return item.value === data.expectType })
			this.regionValue = `${data.provinceName},${data.cityName}`;
			this.minSalary = data.minSalary
			this.maxSalary = data.maxSalary
			this.professionName = data.professionName

		},
		async getonLineResume() {
			const { data } = await onLineResume()

			this.postForm.resumeId = data.id;
			this.postForm.userId = data.userId;
			this.value = data.provinceName + data.cityName + data.areaName

			if (data.name) {
				this.postStatus = true
			} else {
				this.postStatus = false
			}
		},
		changeTab(item, index) {
			this.professionIndex = index
		},
		changeSub(item) {
			this.postForm.professionId = item.id;
			this.postForm.professionTypeId = item.typeId;
			this.professionName = item.text
			this.professionStatus = false
		},
		showProfession() {
			this.professionStatus = true
		},
		change(e, type) {
			console.log(e.detail.value)
			if (type === 'positions') {
				this.expectType = e.detail.value
				this.postForm.expectType = this.positionList[e.detail.value].value
			}

			if (type === 'region') {

				this.regionValue = e.detail.value.join('')
				this.postForm.provinceCode = e.detail.code[0]
				this.postForm.cityCode = e.detail.code[1]
				this.postForm.areaCode = e.detail.code[2]

			}
			this.$forceUpdate()
		},
		// 期望薪资
		onColumnChange(e) {
			this.salayValue = true
			console.log(e)
			if (e.detail.value[0]) {
				this.maxSalaryList = []
				for (let i = this.minSalaryList[e.detail.value[0]]; i <= 50000; i += 1000) {
					this.maxSalaryList.push(i)
				}

			}
			this.salayFix = e.detail.value;
			// console.log(this.salay)
		},
		onConfirmSalay() {
			console.log(this.salayFix)
			this.salay = this.salayFix
			this.minSalary = this.minSalaryList[this.salayFix[0]];
			this.maxSalary = this.maxSalaryList[this.salayFix[1]];
			this.postForm.minSalary = this.minSalary
			this.postForm.maxSalary = this.maxSalary
			this.salaryStatus = false
		},
		// 期望行业
		goIndustry() {
			uni.navigateTo({
				url: '/pages/index/industry?page=expect',
			});
		},
		async toNext() {
			const api = this.flag === 'edit' ? editResumeExpect : saveResumeExpect
			const { code, data } = await api(this.postForm)
			uni.navigateBack({
				delta: 1
			});


		},
		async delectBtn() {

			let _this = this;
			uni.showModal({
				title: '提示',
				content: '是否删除当前求职期望',
				success: async function (res) {
					if (res.confirm) {
						const { data } = await deleteResumeExpect(_this.postForm.id)
						uni.showToast({
							title: '删除成功'
						})
						uni.navigateBack({
							delta: 1
						})
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})

		},

	}
}
</script>

<style lang="less" scoped>
@import url(index.less);

.content {
	display: flex;
	flex-direction: column;

	padding: 20upx;
	// text-align: center;
	height: 100vh;
	overflow: hidden;

}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		width: 240upx;
	}

	.form-cnt {
		width: calc(100% - 300upx);
	}

	.form-cnt1 {
		width: calc(100% - 80upx);
	}

	.resume-input {
		width: calc(100% - 240upx);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}
	}
}

.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}
</style>